<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--    <link rel="icon" type="image/png" sizes="32x32" href="https://q2.qlogo.cn/headimg_dl?dst_uin=748943649&spec=140">-->
    <title>汽车管理租赁系统</title>
    <link rel="stylesheet" type="text/css" href="./statics/common/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="./statics/common/css/global.css" media="all">
    <link rel="stylesheet" type="text/css" href="./statics/common/css/fonts/larry-icon.css" media="all">
    <link rel="stylesheet" type="text/css" href="./statics/css/larryms.css" media="all">
    <link rel="stylesheet" href="./statics/css/normalize.min.css" />
    <!-- Import style -->
    <link rel="stylesheet" href="./statics/js/element-plus/index.css" />
    <!-- 页面样式 -->
    <link rel="stylesheet" href="./statics/css/mf-layout.css" />
</head>

<body>

    <div id="app" v-cloak>
        <div class="common-layout">
            <el-container>
                <el-aside class="sidebar-wrapper" :style="{width:isCollapse?'54px':'230px'}">
                    <div class="logo">
                        <img src="./statics/images/logo@2x.png">
                    </div>
                    <el-scrollbar>
                        <el-menu :collapse="isCollapse" :collapse-transition="false" unique-opened text-color="#CAD4FF"
                            active-text-color="#fff" background-color="#1B3194">
                            <el-sub-menu v-for="item in nav" :index="item.id">
                                <template #title>
                                    <i :class="[item.icon, item.font]" style="margin-right: 10px;"></i>
                                    <span>{{item.title}}</span>
                                </template>
                                <template v-for="children in item.children">
                                    <!-- 二级菜单 -->
                                    <template v-if="!children.children">
                                        <el-menu-item class="nest-menu" :index="children.id" @click="openTab(children)">
                                            <i :class="[children.icon, children.font]" style="margin-right: 10px;"></i>
                                            <span>{{children.title}}</span>
                                        </el-menu-item>
                                    </template>
                                    <!-- 三级菜单 -->
                                    <template v-if="children.children">
                                        <el-sub-menu :index="children.id">
                                            <template #title>
                                                <i :class="[children.icon, children.font]"
                                                    style="margin-right: 10px;"></i>
                                                <span>{{children.title}}</span>
                                            </template>
                                            <el-menu-item class="nest-menu" v-for="children2 in children.children"
                                                :index="children2.id" @click="openTab(children2)">
                                                <i :class="[children2.icon, children2.font]"
                                                    style="margin-right: 10px;"></i>
                                                <span>{{children2.title}}</span>
                                            </el-menu-item>
                                        </el-sub-menu>
                                    </template>
                                </template>
                            </el-sub-menu>
                        </el-menu>
                    </el-scrollbar>
                </el-aside>
                <el-container>
                    <el-header>
                        <div @click="toggleClick" class="hamburger-wrap">
                            <svg :class="{'is-active':isActive}" class="hamburger" viewBox="0 0 1024 1024"
                                xmlns="http://www.w3.org/2000/svg" width="64" height="64">
                                <path
                                    d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
                            </svg>
                        </div>
                        <!--<div class="fm-search">
                            <el-menu mode="horizontal" :ellipsis="false" style="border: 0;">
                                <el-menu-item index="1">业务中心</el-menu-item>
                                <el-menu-item index="2">运营中心</el-menu-item>
                                <el-menu-item index="3">营销中心</el-menu-item>
                                <el-menu-item index="4">管理中心</el-menu-item>
                                <el-menu-item index="5">风控中心</el-menu-item>
                                <el-menu-item index="6">运营报表</el-menu-item>
                                <el-menu-item index="7">客户管理中心</el-menu-item>
                            </el-menu>
                        </div>-->
<!--                        <div class="fm-search">-->
<!--                            <el-input class="fm-search-input" v-model="menuKeyword" placeholder="请输入菜单名称"-->
<!--                                prefix-icon="Search" clearable />-->
<!--                        </div>-->
                        <div class="header-right">
                            <!-- <div class="refresh larryms-press" id="larryms_refresh">
                                <i class="larry-icon larry-shuaxin"></i>
                                <cite style="margin-left:5px">刷新</cite>
                            </div> -->
                            <div class="refresh larryms-press">
                                <i class="larry-icon larry-xitong10"></i>
                                <cite style="margin-left:5px" @click="goTixing">提醒</cite>
                            </div>
                            <el-dropdown trigger="click" @command="handleUserInfo">
                                <div class="fm-userinfo">
                                    <img src="./statics/images/user.jpg">
                                    <div>
                                        <p style="margin-bottom:5px">{{sysUserInfo.username}}</p>
                                        <!-- <p style="margin-bottom:5px">九条米法 KujoMiva</p> -->
                                        <p class="fm-userinfo-desc">欢迎回来</p>
                                    </div>
                                </div>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item command="personal">个人信息</el-dropdown-item>
                                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </el-header>
                    <el-main>
                        <div class="layui-tab larryms-tab" id="larry_tab" lay-filter="larryTab">
                            <!-- 向左翻页 -->
                            <div class="larryms-btn-default mf-btn-goleft" id="goLeft" v-show="showFanye">
                                <i class="larry-icon larry-top-left-jt"></i>
                            </div>
                            <div class="larryms-title-box clearfix" :class="{'fm-padding':showFanye}"
                                id="larryms_title">
                                <ul class="layui-tab-title larryms-tab-title" lay-allowclose='false'
                                    id="larry_tab_title" lay-filter='larrymsTabTitle'>
                                    <li class="layui-this" id="larryms_home" lay-id="0" data-group="0"
                                        data-id="larryms-home" fresh="1" data-url="html/main1.html">
                                        <i class="larry-icon larry-shouye2" data-icon="larry-shouye2"
                                            data-font="larry-icon"></i>
                                        <cite>后台首页</cite>
                                    </li>
                                </ul>
                            </div>
                            <!-- 向右翻页 -->
                            <div class="larryms-btn-default mf-btn-goright" id="goRight" v-show="showFanye">
                                <i class="larry-icon larry-gongyongshuangjiantouyou"></i>
                            </div>
                            <!-- 关闭菜单 -->
                            <div class="fm-btn-close">
                                <!-- <i class="larry-icon larry-qingchuhuancun1"></i> -->
                                <div class="refresh larryms-press mlgb_btn" id="larryms_refresh">
                                    <i class="larry-icon larry-refresh2"></i>
                                    <cite style="margin-left:5px">刷新</cite>
                                </div>
                                <div class="mlgb_btn" id="clearCached" v-if="false">
                                    <!-- <i class="larry-icon larry-cuowu3"></i> -->
                                    <i class="larry-icon larry-qingchuhuancun1"></i>
                                    <cite style="margin-left: 5px;">关闭</cite>
                                </div>
                            </div>
                            <!-- tab title end -->
                            <div class="layui-tab-content larryms-tab-content" id="larry_tab_content">
                                <div class="layui-tab-item layui-show">
                                    <iframe class="larry-iframe" data-id='0' name="ifr_0" id='ifr0' src="main.html"
                                        frameborder="no" border="0"></iframe>
                                </div>
                            </div>
                            <!-- tab content end -->
                        </div>
                    </el-main>
                </el-container>
            </el-container>
        </div>
    </div>
    <ul class="larryms-nav larryms-nav-tree" style="display: none;" id="larryms_top_menu" lay-filter="LarrySide"
        data-group='0'></ul>
    <ul class="larryms-nav larryms-nav-tree" style="display: none;" id="larryms_left_menu" lay-filter="LarrySide"
        data-group='0'></ul>

    <!-- Import Vue 3 -->
    <script src="./statics/js/vue3/vue.global.js"></script>
    <!-- Import component library -->
    <script src="./statics/js/element-plus/index.full.js"></script>
    <script src="./statics/js/element-plus/icons-vue.js"></script>
    <script src="./statics/plugins/jquery.min.js"></script>
    <script src="./statics/common/layui/layui.js"></script>
    <script src="./statics/js/common.js"></script>
    <script>
        layui.cache.menusUrl = baseURL + '/sys/menu/nav';//这里设置 菜单数据项接口地址 或data参数
        layui.cache.page = 'index';
        layui.config({ base: './statics/common/' }).extend({ larry: 'js/base' }).use('larry');

        const App = {
            data() {
                return {
                    nav: [],
                    menuKeyword: '',
                    isActive: false,
                    sysUserInfo: {
                        username: '-',
                        deptName: '-',
                        roles: '-',
                        avatar: '-'
                    },
                    showFanye: false,
                };
            },
            computed: {
                isCollapse() {
                    return this.isActive;
                },
            },
            created() {
                this.getNav();
                this.getSysUserInfo();
            },
            methods: {
                getNav() {
                    $.ajax({
                        url: baseURL + '/sys/menu/nav',
                        method: 'get',
                        success: (res) => {
                            console.log(res);
                            this.nav = res.data;
                        },
                    })
                },
                toggleClick() {
                    this.isActive = !this.isActive;
                },
                openTab(item) {
                    if ($('#larry_tab_title').children().length > 5) {
                        this.showFanye = true;
                    }
                    window.larryTab.tabAdd({
                        id: item.url,
                        href: item.url,
                        title: item.title,
                    })
                },
                goTixing() {
                    this.openTab({ title: '消息列表', url: './modules/message/message.html' });
                },
                getSysUserInfo() {
                    $.get(baseURL + 'workbench/workbench/sysuserinfo', (r) => {
                        console.log(r)
                        if (null != r.sysUserInfo) {
                            this.sysUserInfo = r.sysUserInfo;
                        }
                    });
                },
                handleUserInfo(evt) {
                    console.log(evt);
                    if (evt == 'logout') {
                        this.logout();
                        return;
                    }
                    if (evt == 'personal') {
                        layer.open({
                            title: "个人中心",
                            type: 2,
                            area: ['800px', '480px'],
                            content: "./modules/sys/info.html",
                            end: function () {
                                layer.closeAll();
                            }
                        });
                    }
                },
                clearAllCookie() {
                    var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
                    if (keys) {
                        for (var i = keys.length; i--;)
                            document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
                    }
                },
                logout() {
                    $.ajax({
                        url: baseURL + '/logout',
                        method: 'get',
                        complete: (res) => {
                            this.clearAllCookie()
                            localStorage.clear();
                            sessionStorage.clear();
                            if (top) {
                                top.location.href = 'login.html';
                            } else {
                                window.location.href = 'login.html';
                            }
                        }
                    })
                }
            },
        };
        const app = Vue.createApp(App);
        for ([name, comp] of Object.entries(ElementPlusIconsVue)) {
            app.component(name, comp);
        }
        app.use(ElementPlus);
        app.mount("#app");
    </script>
</body>

</html>